<template>
  <div class="common-layout">
    <div style="height: 40px"></div>
    <el-container style="padding: 0;margin: 0">
      <el-header style="width: 100%;height: 52px;background-color: white;z-index: 1;position: fixed;top: 0px">
        <div style="width: 1400px;margin: 0 auto;border-bottom: 1px solid #e9e9eb;">
          <el-row>
            <el-col :span="10">
              <el-row :gutter="20">
                <el-col :span="6">
                  <router-link to="/">
                    <img
                        style="height: 26px;margin-top: 10px;padding-left: 35px"
                        :src="imgUrl"
                        alt="Kcircle logo"
                    />
                  </router-link>
                </el-col>
                <el-col :span="14">
                  <el-menu
                      default-active="/index/recommend"
                      mode="horizontal"
                      active-text-color=""
                      style="width: 380px; height: 52px;background-color: white;font-weight: bold;font-size: 15px;"
                      text-color="#8493a5"
                      router="true"
                  >
                    <div class="flex-grow" />
                    <el-menu-item index="/index/recommend">首页</el-menu-item>
                    <el-menu-item index="/setup">知友</el-menu-item>
                    <el-menu-item index="/login">发现</el-menu-item>
                    <el-menu-item index="/write">等你来答</el-menu-item>
                  </el-menu>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="8">
              <el-input style="margin-top: 7px;width: 380px" placeholder="请输入搜索的关键字">
                <template #append>
                  <el-button :icon="Search" />
                </template>
              </el-input>

              <el-button type="primary"  @click="dialogFormVisible = true" style="position: relative;top: 3px;left: 10px;">
                提问
              </el-button>

              <el-dialog v-model="dialogFormVisible" title="发布问题">
                <el-form :model="question">
                  <el-form-item label="问题" :label-width="formLabelWidth">
                    <el-input v-model="question.title" autocomplete="off" />
                  </el-form-item>

                  <el-radio-group v-model="question.categoryId"  style="margin-left: 80px;margin-bottom: 20px">
                    <el-radio label="1">情感问题</el-radio>
                    <el-radio label="2">电竞</el-radio>
                    <el-radio label="3">生活</el-radio>
                    <el-radio label="4">体育</el-radio>
                  </el-radio-group>

                  <el-form-item label="图片描述" style="margin-left: 40px;margin-bottom: 20px">
                    <!--   上传组件开始   -->
                    <el-upload
                        v-model:file-list="fileList"
                        :action="BASE_URL.ATTACHMENT+'/upload/question/image'"
                        :headers="{'Authorization':user.token}"
                        :data="questionImageDescription"
                        name="file"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                    >
                      <el-icon>
                        <Plus/>
                      </el-icon>
                    </el-upload>

                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
                    </el-dialog>
                    <!--   上传组件结束   -->
                  </el-form-item >

                  <el-form-item label="视频" style="margin-left: 40px;margin-bottom: 20px">
                    <!--   上传组件开始   -->
                    <el-upload
                        :action="BASE_URL.ATTACHMENT+'/upload/question/video'"
                        :data="questionVideoDescription"
                        :headers="{'Authorization':user.token}"
                        name="file"
                        limit="1"
                        accept="video/*"
                        :on-remove="handleRemove"
                        :on-success="handleSuccess"
                    >
                      <el-button>点击上传视频</el-button>
                      <div>只能上传mp4文件,且不超过100MB</div>
                    </el-upload>
                    <el-dialog v-model="dialogVisible">
                      <img w-full :src="dialogImageUrl" alt="Preview Image"/>
                    </el-dialog>
                    <!--   上传组件结束   -->
                  </el-form-item >

                  <el-form-item label="正文内容" :label-width="formLabelWidth">
                    <el-input v-model="question.detail" :rows="2" autosize
                              type="textarea"  placeholder="输入问题背景、条件等详细信息(选填)" autocomplete="off" style="height: 150px" />
                  </el-form-item>
                </el-form>

                <template #footer>
                    <span class="dialog-footer">
                      <el-button @click="dialogFormVisible = false">取消发布</el-button>
                      <el-button type="primary"  @click="postContent()">
                        提交问题
                      </el-button>
                    </span>
                </template>
              </el-dialog>
            </el-col>

            <el-col :span="3">
              <el-row :gutter="20" style="left: 80px">
                <el-col :span="6">
                  <el-popover
                      placement="top-start"
                      :width="320"
                      trigger="click"
                      style="margin: 0 auto;"
                  >
                    <el-tabs type="border-card" style="width: 291px;height: 400px;margin: 0;">
                      <el-tab-pane label="邀请回答">
                        <el-scrollbar height="320px">
                          <div v-for="a in 10" style="line-height: 10px;height: 60px;border-top: 1px solid #e9e9eb;">
                            <a style="color: deepskyblue;line-height: 37px">曾祥轩</a>
                            的提问等你来回答：
                            <a style="color: deepskyblue">这世界上有SUV吗?</a>
                          </div>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="关注列表">
                        <el-scrollbar height="320px">
                          <el-card v-for="a in 10">
                            <el-avatar shape="square" :size="size" :src="headUrl" />
                            <div style="height: 40px;width: 160px;display: inline-block;margin-top: 0;margin-left: 15px;line-height: 25px">
                              <span style="font-size: 15px;color: black;font-weight: bold">爱吃保底的七七</span><br>
                              都说互联网行业是一个...
                            </div>
                          </el-card>
                        </el-scrollbar>
                      </el-tab-pane>
                      <el-tab-pane label="关注动态">
                        <ul style="list-style-type: none;padding-left: 0px;margin-top: 0;">
                          <li v-for="index in 10" style="margin-bottom: 10px">
                            关注动态
                          </li>
                        </ul>
                      </el-tab-pane>
                    </el-tabs>
                    <div style="height: 30px;width: 291px;margin: 0;border: 1px solid #e9e9eb;line-height: 30px;border-top: 0"  @click="router.push('/setup/account')">
                      <a href="javascript:void(0)" style="padding-left: 10px"><span style="position: relative;padding-right:5px;top: 2px;">
                        <el-icon><Tools /></el-icon></span>
                        设置
                      </a>
                      <a href="javascript:void(0)" style="padding-left: 135px">查看全部通知</a>
                    </div>


                    <template #reference>
                      <div style="color: #8493a5;font-size: 12px;text-align: center;margin-top: 5px" >
                        <el-icon class="icon" size="18" color="#8493a5"><BellFilled/></el-icon><br>
                        <span style="position: relative;top: -2px">消息</span>
                      </div>
                    </template>
                  </el-popover>
                </el-col>

                <el-col :span="6">
                  <el-popover
                      placement="top-start"
                      :width="320"
                      trigger="click"
                      style="margin: 0 auto;"
                  >
                    <div style="height: 40px;text-align: center;line-height: 30px;border-bottom: 1px solid #e9e9eb;">
                      <a href="" style="font-size: 14px">我的私信</a>
                    </div>
                    <el-scrollbar height="320px">
                      <el-card v-for="a in 10">
                        <el-avatar shape="square" :size="size" :src="headUrl" />
                        <div style="height: 40px;width: 160px;display: inline-block;margin-top: 0;margin-left: 15px;line-height: 25px">
                          <span style="font-size: 15px;color: black;font-weight: bold">爱吃保底的七七</span><br>
                          都说互联网行业是一个...
                        </div>
                      </el-card>
                    </el-scrollbar>
                    <div style="height: 30px;width: 291px;margin: 0;border: 1px solid #e9e9eb;line-height: 30px;">
                      <a href="" style="padding-left: 10px"><span style="position: relative;padding-right:5px;top: 2px;"><el-icon><EditPen /></el-icon></span>写新私聊</a>
                      <a href="" style="padding-left: 107px">查看全部通知</a>
                    </div>
                    <template #reference>
                      <div style="color: #8493a5;font-size: 12px;text-align: center;margin-top: 5px" >
                        <el-icon class="icon" size="18" color="#8493a5"><Comment/></el-icon><br>
                        <span style="position: relative;top: -2px">私聊</span>
                      </div>
                    </template>
                  </el-popover>

                </el-col>

                <el-col :span="6" >
                  <div style="color: #8493a5;font-size: 12px;text-align: center;margin-top: 5px" >
                    <el-icon class="icon" size="18"><UserFilled/></el-icon><br>
                    <span style="position: relative;top: -2px;">中心</span>
                  </div>
                </el-col>

                <el-col :span="6">
                  <el-popover
                      placement="top-start"
                      :width="100"
                      trigger="click"
                      style="margin: 0 auto;"
                  >
                    <div class="headMenu">
                      <el-icon size="18"><UserFilled /></el-icon>
                      <span class="headspan">个人中心</span>
                    </div>
                    <div class="headMenu" style="height: 40px;line-height: 40px">
                      <el-icon size="18"><Opportunity /></el-icon>
                      <span class="headspan">无障碍</span>
                    </div>
                    <div class="headMenu" style="height: 40px;line-height: 40px">
                      <el-icon size="18"><DeleteFilled /></el-icon>
                      <span class="headspan">关怀版</span>
                    </div>
                    <div class="headMenu" style="height: 40px;line-height: 40px" @click="router.push('/setup/account')">
                      <el-icon size="18"><Tools /></el-icon>
                      <span class="headspan">设置</span>
                    </div>
                    <div class="headMenu" style="height: 40px;line-height: 40px" @click="router.push('/login')">
                      <el-icon size="18"><SwitchButton /></el-icon>
                      <span class="headspan">退出</span>
                    </div>
                    <template #reference>
                      <el-avatar shape="square" :size="size" :src="headUrl" />
                    </template>
                  </el-popover>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>


      </el-header>
      <el-main style="margin: 0 auto;padding: 10px;overflow: hidden">
        <router-view/>
      </el-main>
    </el-container>
  </div>

  <el-backtop :bottom="100" style="width: 100px">
    <div
        style="
        height: 100%;
        width: 100%;
        background-color: var(--el-bg-color-overlay);
        box-shadow: var(--el-box-shadow-lighter);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
      "
    >
      回到顶部
    </div>
  </el-backtop>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import {
  Search
} from '@element-plus/icons-vue';
import router from '@/router';
import axios from "axios";
import qs from 'qs';
import BASE_URL from "@/http/BaseUrl";
import TokenAxios from "@/http/TokenAxios";

onMounted(()=>{
  user.value=getUser()
  console.log("页面加载完成");
  console.log("" +
      " _  __    _          _      \n" +
      "| |/ /___(_)_ __ ___| | ___ \n" +
      "| ' // __| | '__/ __| |/ _ \\\n" +
      "| . \\ (__| | | | (__| |  __/\n" +
      "|_|\\_\\___|_|_|  \\___|_|\\___|\n" +
      "                            " +
      "")

  // console.log("" +
  //     "_|    _|            _|                      _|            \n" +
  //     "_|  _|      _|_|_|      _|  _|_|    _|_|_|  _|    _|_|    \n" +
  //     "_|_|      _|        _|  _|_|      _|        _|  _|_|_|_|  \n" +
  //     "_|  _|    _|        _|  _|        _|        _|  _|        \n" +
  //     "_|    _|    _|_|_|  _|  _|          _|_|_|  _|    _|_|_|  " +
  //     "")

  // console.log("" +
  //     "oooo    oooo            o8o                     oooo            \n" +
  //     "`888   .8P'             `\"'                     `888            \n" +
  //     " 888  d8'     .ooooo.  oooo  oooo d8b  .ooooo.   888   .ooooo.  \n" +
  //     " 88888[      d88' `\"Y8 `888  `888\"\"8P d88' `\"Y8  888  d88' `88b \n" +
  //     " 888`88b.    888        888   888     888        888  888ooo888 \n" +
  //     " 888  `88b.  888   .o8  888   888     888   .o8  888  888    .o \n" +
  //     "o888o  o888o `Y8bod8P' o888o d888b    `Y8bod8P' o888o `Y8bod8P' " +
  //     "")

  console.log("知友圈(kcircle.com)，招聘前端开发工程师 http://kcircle.com")
  console.log("知友圈(kcircle.com)，招聘后端开发工程师 http://kcircle.com")
})


const user=ref()
const imgUrl=ref("/imgs/登录注册/Logo.jpg");
const headUrl=ref("/imgs/登录注册/head1.jpg")

const dialogFormVisible = ref(false)
const formLabelWidth = '80px'
const formLabelHeight = '150px'

const question = ref({
  title:'',
  brief:'',
  categoryId: '1',
  coverUrl:'',
  videoUrl:'',
  detail: '',
})
/****上传*****/
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const questionImageDescription={
  "remark": "问题描述图片"
}
const questionVideoDescription={
  "remark": "问题描述视频"
}

const handleSuccess = (response,uploadFile,uploadFiles)=>{
  console.log(uploadFile.url)
  //判断上传的是图片还是视频
  if(uploadFile.raw.type.includes('image')){
    //把上传成功的图片路径保存到c对象中, 点击发布时提交给服务器
    question.value.coverUrl = response.data;
    console.log("封面路径")
    console.log( question.value.coverUrl);
  }
  if(uploadFile.raw.type.includes('mp4')){
    //把上传成功的图片路径保存到c对象中, 点击发布时提交给服务器
    question.value.videoUrl = response.data;
    console.log("视频路径")
    console.log(question.value.videoUrl);
  }
}
const handleRemove = (uploadFile, uploadFiles) => {
  if(uploadFile.raw.type.includes('jpg')) {
    question.value.coverurl = null; // 把删除文件的路径 清空
  }else {
    question.value.videoUrl=null;
  }
  //发出删除请求
  let url = uploadFile.response.data;
  let url2={'url':url}
  TokenAxios.post('http://localhost:20300/attachment/remove',url2)
      .then((response) => {
        if (response.data.state == 20000) {
          alert("服务器数据删除完成")
        }
      })
}

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

/*******发布********/
const postContent = ()=>{
  if (question.value.coverUrl==null){alert("请选着封面!");return;}
  if (question.value.title.trim()==''){alert('标题不能为空!');return;}
  //设置文章摘要   从纯文本内容中截取前30个字符作为文章的摘要
  question.value.brief = question.value.detail.slice(0, 30);

  //设置作者id为当前登录的用户id
  let user = localStorage.loginInfo?JSON.parse(localStorage.loginInfo):null;
  console.log(user);
  if (user==null) {
    alert("请先登录!");
    router.push('/login');
    return;
  }
  question.value.author_name=user.username;
  //发请求
  let data = question.value;

  // console.log(data)

TokenAxios.post(BASE_URL.CONTENT_FRONT+'/question/add-new', data)
    .then((response) => {
      console.log(data);
     if (response.data.state == 20000) {
        alert("发布成功");
      } else {
        alert("发布失败");
      }
    });
}
/*******发布问题结束********/

</script>

<style scoped>
a{
  text-decoration: none;
  color: #8493a5;
}
a:hover{
  color: deepskyblue;
}
a:active{
  color: aqua;
}
.el-icon{
  color: #8493a5;
}
.icon:hover{
  color: gray;
}
.headMenu{
  height: 40px;
  line-height: 47px;
}
.headMenu:hover{
  background-color: rgba(132, 147, 165,0.1);
}
.headMenu .el-icon{
  padding-left: 20px;
}
.headspan{
  position: relative;
  left: 5px;
  top: -3px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>


